﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>辛辣FM</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="json2.js"></script>
    <script type="text/javascript" src="chrome_ex_oauthsimple.js"></script>
    <script type="text/javascript" src="chrome_ex_oauth.js"></script>
    <script type="text/javascript">
var bgPage = chrome.extension.getBackgroundPage();
var oauth = bgPage.oauth;
function sina()
{
    this.loginUser = {};
      this.curentUserId='';
      this.currentStautsId='';   
      this.friends=[];
      this.status=[];
};

sina.prototype={
      sinaApis:{
        'friends_timeline':'statuses/friends_timeline',
        'friends':'statuses/friends',
        'user_timeline':'statuses/user_timeline',
        'users':'users/show'
      },
      onProcessedGetPublicTimeLine:null,
      onProcessedGetFriends:null,
      onProcessedGetUserLine:null,
      onProcessedGetUser:null,
      getPublicTimeLine:function()
      {
           var url = this.formUrl(this.sinaApis.friends_timeline);
           var request = {"count":100};
           this.sendSignedRequest(url, this.processGetPublicTimeLine,request);
      },
      processGetPublicTimeLine:function(response, xhr)
      {
             s.status = JSON.parse(response);
            if(s.onProcessedGetPublicTimeLine && $.isFunction(s.onProcessedGetPublicTimeLine))
            {
                s.onProcessedGetPublicTimeLine();
            }
      },
      
      getUserTimeLine:function(userId)
      {
            var url = 'http://api.t.sina.com.cn/statuses/user_timeline/:' + userId +'.json';
           this.sendSignedRequest(url, this.processGetUserLine);
      },
      
      processGetUserLine:function(response, xhr)
      {
            s.status=JSON.parse(response);
            
            if(s.onProcessedGetUserLine && $.isFunction(s.onProcessedGetUserLine))
            {
                s.onProcessedGetUserLine();
            }
      },
      
      getFriends:function()
      {
           var url = this.formUrl(this.sinaApis.friends);
           var request = {count:50};
           this.sendSignedRequest(url, this.processGetFriends ,request);

      },
      
      processGetFriends:function(response, xhr)
      {
        s.friends = JSON.parse(response);
      },
      
      getUserInfo:function(userId)
      {
            var url = 'http://api.t.sina.com.cn/users/show.json';
	         var userid=oauth.getUserId();
	          var request = {
	            'method': 'post',
	            'parameters':{
	    	        'user_id':userId
	            }
             };
	  oauth.sendSignedRequest(url, this.processGetUser, request);
      },
      
      processGetUser:function(response, xhr)
      {
            s.loginUser = JSON.parse(response);
             if(s.onProcessedGetUser && $.isFunction(s.onProcessedGetUser))
            {
                s.onProcessedGetUser();
            }
      },
      
      formUrl:function(api)
      {
         return ['http://api.t.sina.com.cn/', api, '.json'].join('');
      },
      
      sendSignedRequest:function(url, callback, request)
      {
            if(!oauth.hasToken()){
					    oauth.authorize(function(){
				            oauth.sendSignedRequest(url, callback, request);
				            });
				}
				else
				{
				      oauth.sendSignedRequest(url, callback, request);
				}
      }
};

var s = new sina();
var i = 0;
var len = 0;
var autoplay = true;
s.onProcessedGetUserLine =  function(){
    len = s.status.length;
    speak();
}

s.onProcessedGetPublicTimeLine = function(){
    len = s.status.length;
    speak();
}

var signedUserId = oauth.getUserId();
s.onProcessedGetUser = function(){
    var name = s.loginUser.screen_name;
    $('li.user-record').append(['<a target=\'_blank\' href="http://weibo.com/', name, '" >', name, '</a>'].join(''));
}

$(function()
{
    s.getPublicTimeLine();
    s.getFriends();
    s.getUserInfo(signedUserId);
    $('a[bozhu]').live('click', function(){
        $(this).attr('class', 'selected');
        var bozhu = $(this).attr('bozhu');
        if(bozhu)
        {
            reset();
            s.getUserTimeLine(bozhu);
        }
    });
    
    $('#btnGetFriendsTimeline').click(function()
    {
        reset();
        s.getPublicTimeLine();
        $(this).append('<em></em>');
        $('#btnGetFriends').find('em').remove();
    });
    
    $('#btnGetFriends').click(function(){
        var f = '';
        for(var i=0,l=s.friends.length;i<l;i++)
        {
            var friend = s.friends[i];
            f += ['<li class=\'friend\'><a target=\'_blank\' bozhu=\'',friend.id, '\' ', '>', '<img src=', friend.profile_image_url, '></img>', friend.screen_name, '</a></li>'].join('');
        }
        $('#friendsList').html(f);
        $('#friendsList').show();
        
        $(this).append('<em></em>');
        $('#btnGetFriendsTimeline').find('em').remove();
    });
    
    $('#btnNext').click(function(){
       i ++;
       chrome.tts.stop();
    });
    $(window).unload(function(){
        chrome.tts.stop();
    });
});

function speak()
{
    if(i <len)
    {
            chrome.tts.stop();
            var status = s.status[i];
            var name = status.user.screen_name ? status.user.screen_name :  status.user.name;
            var retweetSta = status.retweeted_status;
            var retweetText = retweetSta ?  [retweetSta.user.screen_name, '提到: ', retweetSta.text].join('') : '';
            var img = ['<div style="width:40%;float:left"><img src=', status.user.profile_image_url.replace('/50/', '/180/'), ' /></div>'].join('');
            var text = ['<span style=\'font-weight:bold\'>' + name + '</span>', '说: ', status.text, '。', retweetText].join('');
            $('#imgStatus').attr('src', status.user.profile_image_url.replace('/50/', '/180/'));
            $('#statusText').html(text);
            $('#bozhuHome').attr('href', ['http://weibo.com/', status.user.domain ? status.user.domain : status.user.id].join(''));
            chrome.tts.speak(text,{rate:0.6},function (){
            i ++;
            speak();
        });
    }
    else
    {
        reset(); 
    }
}

function reset()
{
    i=0;
    len=0;
    chrome.tts.stop();
}
    </script>

<link href="packed_core3.css" rel="stylesheet" type="text/css">
<link href="packed_fm_home5.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="fm-section">
        <div id="fm-header">
            <div class="topnav">
                <div class="login">
                    <ul>
                        <li class="user-record"></li>
                    </ul>
                </div>
            </div>
            <div class="logo">
                <a href="http://douban.fm">
                    <img width="117" height="46" src="pics/fm_logo.png"></a>
            </div>
        </div>
        <div id="fm-player">
            <div class="player-wrap">
                <div id="radioplayer" name="radioplayer">
                    <div id="status">
                        <div id="curStatus">
                            <div style="width: 40%; float: left">
                                <a id="bozhuHome" target="_blank">
                                    <img id="imgStatus" style="height: 180px; width: 180px" />
                                </a>
                            </div>
                            <div style="width: 60%; float: right">
                                <div id="statusText">
                                </div>
                                <div style="height: 23px; float: right; padding-right: 50px">
                                    <a id="btnNext" href="#">
                                        <img src="pics/icon_27.png" title="下一条" /></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="x1">
            </div>
        </div>
    </div>
    <div id="fm-channel">
        <ul>
            <li id="fm-personal-label" style="visibility: visible"><a id="btnGetFriendsTimeline"
                href="#" hidefocus tabindex='1' class="on"><i class="x1"></i><i class="x2">公共频道</i><em></em></a></li>
            <li id="fm-public-label" style="visibility: visible"><a id="btnGetFriends" href="#"
                class="on" hidefocus tabindex='2'><i class="x1"></i><i class="x2">私人频道</i></a></li>
        </ul>
    </div>
    <div id="fm-channel-list">
        <div class="ch-list-container">
            <div class="ch-list">
                <ul id="friendsList">
                </ul>
            </div>
        </div>
        <div id="fm-section3" style="display: block;">
            <div id="fm-footer">
                <div class="bd">
                    <div class="copyright" style="color:Red">
                        UI版权归<a href="http://douban.fm" target="_blank">豆瓣FM</a>所有。
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="fm-bg">
    </div>
</body>
</html>
